<template>
    <div>
        <el-form :model="studentDetail" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="studentDetail.name"></el-input>
            </el-form-item>
            <el-form-item label="学校" prop="university">
                <el-select v-model="studentDetail.university" filterable allow-create default-first-option
                    placeholder="请选择学校" @change="getDepartments">
                    <el-option v-for="(item, index) in universities" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学院" prop="department">
                <el-select v-model="studentDetail.department" allow-create default-first-option filterable
                    placeholder="请选择学院">
                    <el-option v-for="(item, index) in departments" :key="index" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="专业" prop="major">
                <el-input v-model="studentDetail.major"></el-input>
            </el-form-item>
            <el-form-item label="学科评级" prop="majorRank">
                <el-select v-model="studentDetail.majorRank" placeholder="请选择">
                    <el-option v-for="item in schoolLevels" :key="item.value" :label="item.label" :value="item.value">
                    </el-option></el-select>
            </el-form-item>
            <el-form-item label="专业排名" prop="rank">
                <el-input v-model="studentDetail.rank"></el-input>
            </el-form-item>
            <el-form-item label="研究方向" prop="searchWay">
                <el-tag :key="tag" v-for="tag in studentDetail.searchWay" closable :disable-transitions="false"
                    @close="handleCloseSearch(tag)">
                    {{ tag }}
                </el-tag>
                <el-input class="input-new-tag" v-if="searchVisible" v-model="searchInput" ref="searchTag" size="small"
                    @keyup.enter.native="handleInputConfirm1" @blur="handleInputConfirm1">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput1">+ New Tag</el-button>
            </el-form-item>
            <el-form-item label="发表论文数" prop="paperNum">
                <el-input v-model="studentDetail.paperNum"></el-input>
            </el-form-item>
            <el-form-item label="兴趣爱好" prop="hobby">
                <el-input v-model="studentDetail.hobby"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import SearchService from "@/service/SearchService";
import StudentService from '@/service/StudentService';
import { Message } from "element-ui";
export default {
    data() {
        return {
            userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
            studentDetail: JSON.parse(sessionStorage.getItem("studentDetail")),
            // 研究方向的tag
            searchInput: '',
            searchVisible: false,
            // 兴趣爱好的输入tag
            inputVisible: false,
            inputValue: '',
            schoolLevels: [
                { label: "A+", value: "A+" },
                { label: "A", value: "A" },
                { label: "A-", value: "A-" },
                { label: "B+", value: "B+" },
                { label: "B", value: "B" },
                { label: "B-", value: "B-" },
                { label: "C+", value: "C+" },
                { label: "C", value: "C" },
                { label: "C-", value: "C-" },
                { label: "未知", value: "未知" },
            ],
            rules: {
                name: [
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                department: [
                    { required: true, message: '请选择学院', trigger: 'change' }
                ],
                rank: [
                    { required: true, message: '请填写排名', trigger: 'blur' }
                ],
                searchWay: [
                    { required: true, trigger: 'change' }
                ],
                hobby:[
                { required: true, trigger: 'change' }
                ]
            },
            levels: [
                {
                    label: "211",
                    value: "211",
                },
                {
                    label: "985",
                    value: "985",
                },
                {
                    label: "普通本科",
                    value: "普通本科",
                },
                {
                    label: "研究所",
                    value: "研究所",
                },
                {
                    label: "港澳台",
                    value: "港澳台",
                },
            ],
            universities: [],
            departments: []
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.updateInfo()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleCloseSearch(tag) {
            this.studentDetail.searchWay.splice(this.studentDetail.searchWay.indexOf(tag), 1);
        },
        handleCloseHobby(tag) {
            this.studentDetail.hobby.splice(this.studentDetail.hobby.indexOf(tag), 1);
        },
        showInput1() {
            this.searchVisible = true;
            this.$nextTick(_ => {
                this.$refs.searchTag.$refs.input.focus();
                console.log(_)
            });
        },
        showInput2() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.hobbyTag.$refs.input.focus();
                console.log(_)
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.studentDetail.hobby.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleInputConfirm1() {
            let inputValue = this.searchInput;
            if (inputValue) {
                this.studentDetail.searchWay.push(inputValue);
            }
            this.searchVisible = false;
            this.searchInput = '';
        },
        async getOption() {
            for (const key in this.levels) {
                let res = await SearchService.GetUniversity({
                    level: this.levels[key].label,
                });
                if (res.code == 0) {
                    this.universities.push(...res.data);
                }
            }
        },
        async getDepartments() {
            try {
                const response = await SearchService.GetDepartment({ university: this.studentDetail.university })
                if (response.code == 0) {
                    this.departments = response.data
                }
            } catch (error) {
                Message.error(error)
            }
        },
        async getStudentInfo() {
            try {
                const params = { id: this.userInfo.id }
                const response = await StudentService.getStudentInfo(params)
                if (response.code == 0) {
                    sessionStorage.removeItem("studentDetail")
                    sessionStorage.setItem("studentDetail", JSON.stringify(response.data))
                }
            } catch (error) {
                Message.error(error)
            }
        },
        async updateInfo() {
            const params = {
                ...this.studentDetail,
                searchWay: this.studentDetail.searchWay.join(";")
            }
            try {
                const response = await StudentService.updateStudentInfo(params)
                if (response.code == 0) {
                    Message.success("更新信息成功!")
                    this.getStudentInfo()
                }
            } catch (error) {
                Message.error(error)
            }
        },
       
    },
    mounted() {
        this.getStudentInfo()
        this.studentDetail.searchWay = this.studentDetail.searchWay == "" ? [] : this.studentDetail.searchWay.split(";")
        this.studentDetail.name = this.userInfo.username
        this.getOption();
    }
}

</script>

<style scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>